<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>表单注册</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #F7F7F7;
		}

		ul {
			margin: 0;
			padding: 50px;
			list-style: none;
		}

		.register {
			width: 800px;
			margin: 50px auto;
			background-color: #FFF;
			border: 1px solid #CCC;
			border-radius: 5px;
		}

		li {
			display: flex;
			margin: 20px 0;
		}
		
		label, input {
			display: block;
			float: left;
			height: 46px;
			font-size: 24px;
			box-sizing: border-box;
			color: #333;
		}

		label {
			width: 200px;
			line-height: 46px;
			margin-right: 30px;
			text-align: right;
		}

		input {
			width: 320px;
			padding: 8px;
			line-height: 1;
			outline: none;
			position: relative;
		}

		input.code {
			width: 120px;
		}

		input.verify {
			width: 190px;
			margin-left: 10px;
		}

		input.disabled {
			background-color: #CCC !important;
		}

		input[type=button] {
			border: none;
			color: #FFF;
			background-color: #E64145;
			border-radius: 4px;
			cursor: pointer;
		}

		.tips {
			position: fixed;
			top: 0;
			width: 100%;
			height: 40px;
			text-align: center;
		}

		.tips p {
			min-width: 300px;
			max-width: 400px;
			line-height: 40px;
			margin: 0 auto;
			color: #FFF;
			display: none;
			background-color: #C91623;
		}
	</style>
</head>

<body>
	<div class="register">
		<form id="ajaxForm">
			<ul>
				<li>
					<label for="">用户名</label>
					<input type="text" name="name" class="name">
				</li>
				<li>
					<label for="">请设置密码</label>
					<input type="password" name="pass" class="pass">
				</li>
				<li>
					<label for="">请确认密码</label>
					<input type="password" name="repass" class="repass">
				</li>
				<li>
					<label for="">验证手机</label>
					<input type="text" name="mobile" class="mobile">
				</li>
				<li>
					<label for="">短信验证码</label>
					<input type="text" name="code" class="code">
					<input type="button" value="获取验证码" class="verify">
				</li>
				<li>
					<label for=""></label>
					<input type="button" class="submit " value="立即注册">
				</li>
			</ul>
		</form>
	</div>
	<!-- 提示信息 -->
	<div class="tips">
		<p>用户名不能为空---</p>
	</div>


	<script src="./js/jquery.min.js"></script>
	<script>
		$(".verify").on("click", function () {
			// 获取手机号，向服务器发送获取验证码

			if ($(".verify").hasClass("disabled")) {
				return;
			}
			var phone = $(".mobile").val();
			$.ajax({
				type: 'get',
				url: './server/getCode.php',
				data: { "phone": phone },
				// 请求发送之前的回调，判断验证的手机号码
				beforeSend: function () {
					// 正则判断手机号码的要求
					var reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/;

					if (!reg.test(phone)) {
						// 如果没有满足，则显示的提示信息
						$(".tips>p").fadeIn(1000).delay(2000).fadeOut(1000).text('请输入合法手机号码');
						return false;
					}
					// 如果没有返回，那么就正常发送请求
					$(".verify").addClass("disabled"); // 按钮加属性  按钮变灰色，显示已经提交
					// 正常提交后，倒计时开始
					var total = 5;
					var timerId = setInterval(function () {
						total--;
						$(".verify").val(total + '秒后重新获取'); // 
						if (total <= 0) {
							$(".verify").val('重新获取').removeClass("disabled"); // 清楚之前添加的禁用样式
							clearInterval(timerId); // 清楚计时器
						}
					}, 1000);
				},
				// success:function(result){

				// }
			})

		})

		$(".name").on("blur", function () {

			// 收集用户数据，发送请求
			var name = $(".name").val();
			
			$.ajax({
				type: 'get',
				url:"./server/validateUsername.php",
				data: { "name":name},
				dataType: "json",
				success: function (result) {
					if(result && result.code == 0){
						// alert("112");
						$(".tips>p").text("请输入账户").fadeIn(1000).delay(2000).fadeOut(1000);
					};
				},
			});
		});

	$(".pass").on("blur",function (){
		var pass = $(".pass").val();
		$.ajax({
			type:'get',
			url:'./server/getCode.php',
			data:{"pass":pass},
			dataType:'json',
			success: function (result) {
					if(result && result.code == 0){
						alert("112");
						$(".tips>p").text("请输入账户").fadeIn(1000).delay(2000).fadeOut(1000);
					};
				},
		})
	})
	$(".submit").on("click",function(){
		// 判断用户是否有注册操作正在执行，如果有则不再执行
		if($('.submit').hasClass("disabled")){
			return;
		}
		var data = $("#ajaxForm").serialize();
		$.ajax({
			type:'post',
			url:'./server/register.php',
			data:data,
			timeout:3000, // 延时执行
			dataType:'json',
			beforeSend:function(){
				$(".submit").addClass("disabled").val("注册中....")
			},
			success:function(result){
				if(result && result.code ==1){
					$(".tab>p").fadeIn(1000).delay(2000).fadeOut(1000).text("result.msg");
				}
			},
			// 不管执行失败还是成功都会执行的回调
			complete:function(){
				$(".submit").removeClass("disabled").val("注册");
			}
		})
	})
	</script>
</body>

</html>